<template>
<el-container>
    <el-aside width="200px">
       <MemberMenu></MemberMenu>
    </el-aside>

<div class="formCss">
     <el-select class="select" v-model="value" placeholder="请选择任务状态">
     <el-option @click="unfinished" value="未完成"></el-option>
     <el-option @click="completed" value="已完成"></el-option>
     <el-option @click="submitted" value="已提交"></el-option>
     <button @click="ton" class="ton">清空</button>
  </el-select>
  <el-table :data="tasks" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
    <el-table-column label="序号" type="index" width="50"></el-table-column>  
    <el-table-column prop="department.name" label="部门名称" width="120"></el-table-column> 
    <el-table-column prop="project.name" label="项目名称" width="120"></el-table-column>
    <el-table-column prop="project.details" label="项目详情" width="120"></el-table-column>
    <el-table-column prop="name" label="任务名称" width="120"></el-table-column>
    <el-table-column prop="details" label="任务详情" width="120"></el-table-column>
     <el-table-column prop="subTime" label="任务发布的时间"  width="120"></el-table-column>
  </el-table>
</div>
</el-container>
</template>
<script>
import MemberMenu from '@/components/menu/MemberMenu.vue'
import instance from '@/utlis/request.js'


export default {
    
    components: {
        MemberMenu,
        
    },
  
    data() {
        
        return {
        tasks:[],
        error:{
                taskId:"",
          }
        
        };
    },
    
    //钩子函数   一般用来初始化数据
     created:function(){
      this.initData();
    },
     methods: {
      //显示页面所有的任务功能
      initData(){
        var companyUser=window.sessionStorage.getItem("companyUser");
        var companyUserObj=JSON.parse(companyUser);
        var companyId=companyUserObj.companyId;
        var departmentId=companyUserObj.departmentId;
        var task={departmentId,companyId};
        instance.post("task/member/findAllContinued/",task).then(res=>{
          this.tasks=res.data.data;
        })
      },
     //任务未完成状态
      unfinished(){
       this.initData();
      },
      //任务已提交状态
      submitted(){
        var companyUser=window.sessionStorage.getItem("companyUser");
        var companyUserObj=JSON.parse(companyUser);
        var companyId=companyUserObj.companyId;
        var departmentId=companyUserObj.departmentId;
        var task={departmentId,companyId};
        instance.post("task/member/findAllSubmitted/",task).then(res=>{
          this.tasks=res.data.data;
        })
      },
      //任务已完成状态
      completed(){
        var companyUser=window.sessionStorage.getItem("companyUser");
        var companyUserObj=JSON.parse(companyUser);
        var companyId=companyUserObj.companyId;
        var departmentId=companyUserObj.departmentId;
        var task={departmentId,companyId};
        instance.post("task/member/findAllDone/",task).then(res=>{
          this.tasks=res.data.data;
        })
      },
      //下拉列表框的清空状态
      ton(){
        this.$router.go(0);
      }
      
    }

}
</script>
<style scoped>
  
    
    .formCss{
         width: 900px;
         margin-left: 270px;
    }

   .ton{
     margin-left: 180px;
   }
   .select{
     margin-top:30px;
   }

   
</style>       